<template>
  <div class="status-query-container">
    <h2>我的反馈历史</h2>

    <div v-if="isLoading" class="loading-state">
      <p>正在加载您的反馈记录...</p>
    </div>

    <div v-else-if="error" class="error-state">
      <p>加载失败：{{ error }}</p>
    </div>

    <div v-else-if="feedbackItems.length === 0" class="empty-state">
      <p>您还没有提交过任何反馈记录。</p>
    </div>

    <div v-else class="feedback-list">
      <div v-for="item in feedbackItems" :key="item.id" class="feedback-card">
        <div class="card-header" @click="toggleExpand(item.id)">
          <div class="card-summary">
            <p class="summary-text">{{ item.feedback_content }}</p>
            <span class="summary-date">{{ formatTimestamp(item.submission_timestamp) }}</span>
          </div>
          <div class="card-controls">
            <span :class="['status-badge', getStatusClass(item.status)]">{{ item.status }}</span>
            <span :class="['chevron', { 'is-expanded': expandedItemId === item.id }]">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
            </span>
          </div>
        </div>

        <div v-if="expandedItemId === item.id" class="card-details">
          <div class="detail-item">
            <strong>反馈全文：</strong>
            <p>{{ item.feedback_content }}</p>
          </div>
          <div class="detail-item">
            <strong>发生地点：</strong>
            <p>{{ item.location }}</p>
          </div>
          <div class="detail-item">
            <strong>部门回复：</strong>
            <p v-if="item.department_reply">{{ item.department_reply }}</p>
            <p v-else class="no-reply">暂无回复</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, inject } from 'vue';
import api from '@/services/api'; // 假设您的 API 服务文件路径

export default {
  name: 'StatusQuery',
  setup() {
    // 从祖先组件 (App.vue) 注入读者ID
    const readerId = inject('readerId');

    const feedbackItems = ref([]);
    const isLoading = ref(true);
    const error = ref(null);
    const expandedItemId = ref(null);

    // 获取反馈历史的方法
    const fetchFeedbackHistory = async () => {
      if (!readerId.value) {
        isLoading.value = false;
        error.value = "无法获取读者ID，请确认您已通过正确链接访问。";
        return;
      }

      try {
        isLoading.value = true;
        error.value = null;
        // 注意：这里我们假设 api.js 中有一个新的方法
        // 您需要在 api.js 中添加 getFeedbackForReader(readerId)
        const response = await api.getFeedbackForReader(readerId.value);
        feedbackItems.value = response.data;
      } catch (err) {
        console.error("加载反馈历史失败:", err);
        error.value = err.response?.data?.detail || "无法连接到服务器。";
      } finally {
        isLoading.value = false;
      }
    };

    // 切换卡片展开/折叠的方法
    const toggleExpand = (id) => {
      if (expandedItemId.value === id) {
        expandedItemId.value = null; // 如果点击的是已展开的卡片，则折叠它
      } else {
        expandedItemId.value = id; // 否则，展开新点击的卡片
      }
    };

    // 格式化时间戳
    const formatTimestamp = (timestamp) => {
      if (!timestamp) return '';
      return new Date(timestamp).toLocaleString('zh-CN', { dateStyle: 'short', timeStyle: 'short' });
    };

    // 根据状态返回不同的 CSS 类名
    const getStatusClass = (status) => {
      switch (status) {
        case '已提交': return 'status-submitted';
        case 'Processing': return 'status-processing';
        case 'Replied': return 'status-replied';
        case 'Closed': return 'status-closed';
        default: return '';
      }
    };

    // 组件挂载时自动执行数据获取
    onMounted(fetchFeedbackHistory);

    return {
      isLoading,
      error,
      feedbackItems,
      expandedItemId,
      toggleExpand,
      formatTimestamp,
      getStatusClass,
    };
  }
};
</script>

<style scoped>
.status-query-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

h2 {
  margin-bottom: 24px;
  text-align: center;
}

.loading-state, .error-state, .empty-state {
  text-align: center;
  color: #666;
  padding: 40px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}

.feedback-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}

.card-summary {
  flex-grow: 1;
  margin-right: 16px;
}

.summary-text {
  font-weight: 500;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-date {
  font-size: 12px;
  color: #757575;
}

.card-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.status-submitted { background-color: #007bff; }
.status-processing { background-color: #ffc107; color: #212529; }
.status-replied { background-color: #28a745; }
.status-closed { background-color: #6c757d; }

.chevron {
  transition: transform 0.3s ease;
}
.chevron.is-expanded {
  transform: rotate(180deg);
}

.card-details {
  border-top: 1px solid #f0f0f0;
  padding: 16px;
  background-color: #fafafa;
}

.detail-item {
  margin-bottom: 12px;
}
.detail-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}
.detail-item p {
  margin: 0;
  font-size: 14px;
  color: #333;
}
.no-reply {
  color: #999;
  font-style: italic;
}
</style>